<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>千库网</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            margin:0px;
            background-color:#f6f6f6;
        }
        ul{
            margin:0px;
            padding:0px;
            list-style: none;
        }
        .nav{
               height:50px;
               width:100%;
               background-color:#10c55b;
               margin-bottom:25px;
        }
        /*定宽居中*/
        .container{
            width:1200px;
            margin:0px auto;
        }
         .left{
            float:left;
        }
        .right{
            float:right;
        }
        .nav ul li{
            float:left;
            margin-right:20px;
            padding:0px 15px;
        }
        .nav ul li a {
            display:inline-block;
            color:white;
            text-decoration: none;
            font-size:20px;
            line-height:50px;
        }
        /*设置箭头的样式*/
        .arrows{
            display: inline-block;
            color:white;
            transform: rotate(90deg) scale(1,1.3);
            margin-left:5px;
        }
        /*设置点*/
        #dian{
            position: relative;
            top:-15px;
            font-size:45px;
        }
         .left li:nth-child(1){
            background-color:#01ac48;
        }
        /*设置vip*/
        .vip{
            display: inline-block;
            height:25px;
            width:25px;
            /*128 77*/
            background-image: url('qiantuku/common.png');
            background-position: -126px -177px;
            position: relative;
            top:10px;
            left:-3px;
        }
        .right small{
            font-size:15px;
            color:#01923d;
        }
        .right .shadow{
           width:60px;
           background-color:#01923d;
           border-radius: 10px;
           /*height:35px;*/
        }
        /*设置输入框的样式*/
        .shuru{
            width:700px;
            height:50px;
            display: inline-block;
            margin-left:80px;
            border-radius:5px;
            border:1px solid green;
            position: relative;
            top:-35px;
        }
        header img{
            width:140px;
            height:65px;
        }
        .shuru span{
            display: inline-block;
            /*margin-left:20px;*/
            position: relative;
            left:40px;

        }
        .shuru button{
            height:50px;
            width:80px;
            float:right;
            border:0px;
            border-radius:5px;
            background-color:#01923d;
        }
        .shuru input{
            width:500px;
            height:30px;
            margin-left:50px;
            margin-top:10px;
            font-size:14px;
            color:#ccc;
            font-weight:100;
            border: none;
            outline: 0;
            border-left:1px solid;
            background-color:#f6f6f6;
        }
        .shuru .arrows{
            color:green;
        }
        .fang{
           display: inline-block;
            height:35px;
            width:30px;
            background-image: url('qiantuku/common.png');
            background-position: -66px -440px;
            /*position: relative;*/
            /*left:-100px;*/
            margin-left:-60px;
        }
        .lis{
            position: relative;
            left:580px;
            top:-33px;
        }
        .lis li{
            float:left;
            font-size: 13px;
        }
        .lis a{
            font-size:13px;
            text-decoration: none;
            margin-left:10px;
        }
        .box{
            width:100%;
            height:320px;
            /*background-color:red;*/
            position:relative;
        }
        .box img{
            width:100%;
            height:320px;
            position: absolute;
            top:0px;
            left:0px;
        }
        .box div{
            width:200px;
            position:absolute;
            bottom:10px;
            left:calc(50% - 100px);
        }
        .box .yuan{
            display: inline-block;
            width:20px;
            height:20px;
            border-radius:50%;
            border:1px solid green;
            cursor: pointer;
        }
        .now{
            background-color:red;
        }
        .box li{
            display: none;
        }
        .box .current{
            display: block;
        }
        .jian{
            width:50px;
            height:100px;
            font-size:30px;
            position:absolute;
            top:130px;
            background-color:black;
            color:white;
            line-height:100px;
            text-align:center;
            opacity:0.5;
            cursor: pointer;
        }
        .prev{
            left:0px;
             border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
        }
        .next{
            right:0px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
        }
        .des{
            display:flex;
            position: relative;
        }
        .des p{
            margin-left:20px;
            margin-top:25px;
        }
        .more{
            position: absolute;
            right:0;
            top:30px;
        }
        .icons{
            display: inline-block;
            width:30px;
            height:30px;
            background-image: url('qiantuku/common.png');
            background-position: -95px -415px;
            margin-top:24px;
            margin-left:2px;
        }
        .des .a2{
            background-position:-126px -415px;
        }
        .tu{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .tu div{
            width:290px;
            height:200px;
        }
        .tu .out{
            position:relative;
        }
        .show{
            background-color:rgba(0, 0,0, 0.5);
            position: absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            display: none;
            z-index: 100;
        }
        .out:hover .show{
            display: inline-block;
            opacity: 0.5;
        }
        .wenzi{
            width:250px;
            height:150px;
            text-align: center;
            margin:15px 20px;
            padding:25px;
            border-top:3px solid white;
            border-bottom:3px solid white;
            position:absolute;
            top:200px;
            z-index: 200;
            transition: all 0.5s linear;
            display: none;
        }
        .wenzi .one{
            display: inline-block;
            font-size:25px;
            margin-bottom:20px;
        }
        /*设置商业海报*/
        .shangyong{
            display: flex;
            justify-content: space-between;
        }
        .shangyong div{
            /*margin-top:200px;*/
            width:290px;
            float:left;
            font-size:14px;
            position:relative;
        }
        /*设置原创样式*/
        .yuanchuang{
            display: inline-block;
            width:50px;
            height:50px;
            background-image:url('qiantuku/common.png');
            position:absolute;
            top:0px;
            background-position:0px 0px;
            z-index: 100;
        }
        .shangyong div:hover .show{
            display: inline-block;
        }
        .p{
            height:387px;
        }
        .com{
            display: inline-block;
            width:45px;
            height:45px;
            border-radius:50%;
            /*border:1px solid black;*/
            background-image:url('qiantuku/common.png');
        }
        .aa{
            position:absolute;
            top:-80px;
            text-align: center;
            transition: all 0.5s linear;
            display: none;
        }
        .shangyong div:hover .aa{
            top:0px;
            z-index: 300;
            display: inline-block;
        }
        .p1{
            background-position:-62px -115px; 
        }
        .p2{
            background-position:-6px -116px;
        }
        .download{             
            left:180px;
        }
        .heart{
            left:230px;
        }
        footer{
            width:100%;
            height:318px;
            background-color:#fff;
        }
        footer ul{
            float:left;
            margin-right:50px;
            margin-top:40px;
        }
        footer .first{
            color:#666;
            font-weight:800px;
        }
        footer li{
            color:#888;
            margin-top:5px;
        }
        footer section{
            margin:0px;
            float:right;
            margin-top:45px;
            width:310px;
        }
        .clear{
            clear: both;
        }
        hr{
            margin-top:40px;
        }
        footer .tel{
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image:url('qiantuku/common.png');
            background-position:-65px -174px;
            position:relative;
            top:5px;
        }
        footer .email{
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image:url('qiantuku/common.png');
            background-position:-35px -174px;
            position:relative;
            top:9px;
        }
        footer button{
            width:140px;
            height:40px;
            border: 0px;
            border-radius:5px;
            line-height:40px;
            font-size:20px;
        }
        .qq{
            display: inline-block;
            width:26px;
            height:26px;
            background-image:url('qiantuku/common.png');
            background-position:0px -174px;
            position: relative;
            top:5px;
            left:-10px;
        }
        .di>li{
            float:left;
            margin-right:20px;
        }

        .xinxi{
            position: relative;
            left:200px;
            top:20px;
            padding-top:10px;
        }
         .di .weibo{
            display: inline-block;
            width: 26px;
            height: 26px;
            background-image:url('qiantuku/common.png');
            background-position: -65px  -200px;
        }
        .di .weixin{
            display: inline-block;
            width:26px;
            height:26px;
            background-image:url('qiantuku/common.png');
            background-position: -35px -200px;
        }
       
    </style>
</head>

<body>
<!--导航-->
<section class="nav">
    <div class="container">
        <div class="left">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">所有分类</a><span class="arrows">&gt;</span></li>
                <li><a href="">设计创意</a></li>
                <li><a href="">办公创意</a></li>
                <li><a href=""  id="dian">...</a></li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li><span class="vip"></span><a href="">vip中心</a></li>
                <li><a href="" class="shadow">请登录</a></li>
                <li><a href=""><small>欢迎注册</small></a></li>
            </ul>
        </div>
    </div>
</section>
<!--头部-->
<header>
    <div class="container">
        <img src="qiantuku/logo.png" alt="">
        <div class="shuru">
            <span>全站</span>
            <span class="arrows">&gt;</span>
            <input type="text" placeholder="800免费素材任意下载">
            <button type=""><span class="vap fang"></span></button>
        </div>
    </div>

    <ul class="lis">
        <li>热门搜索：</li>
        <li><a href="">七夕</a></li>
        <li><a href="">详情页</a></li>
        <li><a href="">icon</a></li>
        <li><a href="">主图</a></li>
        <li><a href="">秋季</a></li>
        <li><a href="">ppt模版</a></li>
        <li><a href="">EXXEL模版</a></li>
        <li><a href="">首页</a></li>
        <li><a href="">个人简历</a></li>
    </ul>
</header>
<!--轮播图-->
<section class="box">
    <ul>
        <li class="current"><a href=""><img src="qiantuku/banner01.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner02.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner03.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner04.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner05.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner06.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner07.jpg"></a></li>
        <li><a href=""><img src="qiantuku/banner08.jpg"></a></li>
    </ul>
     <div>
            <span class="yuan now"></span>
            <span class="yuan"></span>
            <span class="yuan"></span>
            <span class="yuan"></span>
            <span class="yuan"></span>
            <span class="yuan"></span>
            <span class="yuan"></span>
            <span class="yuan"></span>
        </div>
        <span class="prev jian">&lt;</span>
        <span class="next jian">&gt;</span>
</section>
<section class="nei">
    <div class="container">
        <div class="des">
            <span class="icons"></span>
            <h1>精选主题</h1>
            <p>100万党建素材、PPT汇报模板无限下载，每天仅需0.18元立享VIP特权</p>
            <div class="more">
                <span>更多</span>
                <span>&gt;&gt;</span>
            </div>
        </div>
        <div class="tu">
            <div class="out">
                <img src="qiantuku/jxzt01.jpg" alt="">
                <p class="wenzi">
                    <span class="one">喝啤酒有关</span><br>
                    <span class="two">啤酒是如何拯救世界的</span>
                </p>
                <div class="show"></div>
            </div>
            <div class="out">
                <img src="qiantuku/jxzt02.jpg" alt="">
                 <p class="wenzi">
                    <span class="one">爱的背景元素</span><br>
                    <span class="two">七夕到，让爱在土中发芽</span>
                </p>
                <div class="show"></div>
            </div>
            <div class="out">
                <img src="qiantuku/jxzt03.jpg" alt="">
                 <p class="wenzi">
                    <span class="one">鲜花背景精选</span><br>
                    <span class="two">为你的设计锦上添花</span>
                </p>
                <div class="show"></div>
            </div>
            <div class="out">
                <img src="qiantuku/jxzt04.jpg" alt="">
                 <p class="wenzi">
                    <span class="one">枫叶元素背景精选</span><br>
                    <span class="two">一叶而知秋</span>
                </p>
                <div class="show"></div>
            </div>
           
            <div class="show"></div>
            <div class="show"></div>
            <div class="show"></div>
            
        </div>
        <div class="des">
            <span class="icons a2"></span>
            <h1>商用海报</h1>
            <p>招聘海报&#x3000;配图海报&#x3000;企业文化&#x3000;促销海报&#x3000;原创插画</p>
            <div class="more">
                <span>更多</span>
                <span>&gt;&gt;</span>
            </div>
        </div>
        <div class="shangyong">
              <div>
                  <img src="qiantuku/syhb01.jpg" alt="">
                  <p>超清新雪糕夏日凉爽海报</p>
                  <span class="yuanchuang"></span>
                  <span class="show p"></span>
                  <p class="heart aa">
                    <span class="com p1"></span><br>
                    <span>2</span>
                  </p>
                  <P class="download aa">
                    <span class="com p2"></span><br>
                    <span>200</span>
                  </P>
              </div>
              <div>
                  <img src="qiantuku/syhb02.jpg" alt="">
                  <span class="yuanchuang"></span>
                  <span class="show p"></span>
                  <p>文艺夏日时光菠萝蓝色简约海报设计微信配图</p>
                  <p class="heart aa">
                    <span class="com p1"></span><br>
                    <span>2</span>
                  </p>
                  <P class="download aa">
                    <span class="com p2"></span><br>
                    <span>200</span>
                  </P>
              </div>
              <div>
                  <img src="qiantuku/syhb03.jpg" alt="">
                  <span class="yuanchuang"></span>
                  <span class="show p"></span>
                  <p>七夕情人节扁平风创意简约商业海报设计模板</p>
                  <p class="heart aa">
                    <span class="com p1"></span><br>
                    <span>2</span>
                  </p>
                  <P class="download aa">
                    <span class="com p2"></span><br>
                    <span>200</span>
                  </P>
              </div>
              <div>
                  <img src="qiantuku/syhb05.jpg" alt="">
                  <span class="yuanchuang"></span>
                  <span class="show p"></span>
                  <p>我的前半生文艺情感配图海报设计</p>
                  <p class="heart aa">
                    <span class="com p1"></span><br>
                    <span>2</span>
                  </p>
                  <P class="download aa">
                    <span class="com p2"></span><br>
                    <span>200</span>
                  </P>
              </div>
        </div>
    </div>
</section>
<footer>
        <div class="container">
            <ul>    
                <li class="first">常见问题</li>
                <li> 成为特邀设计师</li>
                <li>成为原创贡献者</li>
                <li>注册登录</li>
                <li>帐号/密码</li>
                <li>充值/售后</li>
                <li>版权投诉</li>
            </ul>
            <ul>
                <li class="first">关于千图网</li>
                <li>  关于我们</li>
                <li> 媒体报道</li>
                <li>加入我们</li>
                <li>心系千图</li>
                <li>每日最新</li>
            </ul>
            <ul>
                <li class="first">产品服务</li>
                <li>官方博客</li>
                <li>帮助中心</li>
                <li>千图导航</li>
            </ul>
            <ul>
                <li class="first"> 友情链接</li>
                <li>我图网</li>
                <li>千库网</li>
                <li>摄图网</li>
                <li>包图网</li>
                <li>视达网</li>
                <li>更多&gt;&gt;</li>     
            </ul>
            <section>
                <p style="font-size:20px;">客服服务</p>
                <p><span class="tel"></span>400-988-711 &#x3000;<small>(9:00-18:00)</small></p>
                <p><span class="email"></span>feedback@58pic.com</p>
                <button style="background-color:#10c55b;"><span class="qq"></span>点我交谈</button>
            </section>
            <div class="clear"></div>
            <hr>
            <ul class="di">
                <li><span class="weibo"></span></li>
                <li><span class="weixin"></span></li>
                <li>注册声明</li>
                <li>版权声明</li>
                <li>售后服务</li>
            </ul>
            <p class="xinxi">Copyright ©2013-2017 千图网 沪ICP备10011451号-6上海工商 安全实名验证 信用网站</p>
        </div>
</footer>
</body>
</html>
<script>
       var outs = document.querySelectorAll('.out');
       var wenzis = document.querySelectorAll('.out .wenzi');
       for(var i = 0 ;i<outs.length;i++){
            outs[i].index = i;
            outs[i].onmouseover = function(){
                    wenzis[this.index].style.display = 'block';
                    wenzis[this.index].style.top = '0px';
            }
            outs[i].onmouseout = function(){
                    // wenzis[this.index].style.top = '200px';
                    wenzis[this.index].style.cssText = '';

            }
       }

    //  设置轮播图
    var box = document.querySelector('.box')
    var yuans = document.querySelectorAll('.yuan');
    var lis = document.querySelectorAll('.box li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var index = 0;
    var timer = null
    next.onclick = function(){
        if(index = 5){
            index = 0;
        }
        index = index + 1;
    }

    function showImg(){
        for(var i =0;i<lis.length;i++){
           lis[i].className = '';
           yuans[i].classList.remove('now');
        }
        index ++;
        if(index == 8){
            index = 0;
        }
        lis[index].className = 'current';
        yuans[index].classList.add('now');
    }
    timer = setInterval(showImg,1000);
    box.onmouseover = function(){
        clearInterval(timer);
        timer = null;
    }
    box.onmouseout = function(){
        if( timer != null) return;
        timer = setInterval(showImg,1000);
    }

    // 点击圆圈切换
    for(var i = 0; i < yuans.length;i++){
        yuans[i].index = i;
        yuans[i].onclick = function(){
            index = this.index - 1;
            showImg();
        }
    }
    // 点击左箭头切换上一个
    prev.onclick = function(){
        index = index -2;
        showImg();
        if( index == 0){
            index =lis.length;
        }
    }
    // 点击右剪头切换下一个
    next.onclick = function(){
        showImg();
    }

    // 设置下载的动画
    // var divs = document.querySelectorAll('.shangyong div');
    // var ps = document.querySelectorAll('.aa');
    // for (var i =0; i<divs.length;i++){
    //     divs[i].index = i;
    //     divs[i].onmouseover = function(){
    //         ps[this.index].style.top = '0px';
    //         var count = this.index + 1
    //         ps[count].style.top = '0px';
    //     }
    //     divs[i].onmouseout = function(){
    //         ps[this.index].style.display = 'none';
    //     }
    // }   
</script>